<template>
	<view>
		<u-empty v-if="listData.length==0" marginTop='100' mode="data"
			:icon="require('@/static/mine/empty.png')"></u-empty>
		<view @click="toDetail(item.baseId)" v-for="(item,index) in listData" :key="index" class="p-area">
			<view class="entryStatus-area">
				{{typeArr.filter(a=>a.dictValue==item.processState)[0].dictLabel}}
			</view>
			<view class="start_layout">
				<view>
					<view v-if="item.hasAppraise==0" class="center_layout demo-box" id="demo1">已评价</view>
					<view v-if="item.hasAppraise==1" class="center_layout demo-box" id="demo3">未评价</view>
				</view>
				<view class="p-name">{{item.title}}</view>
			</view>
			<view style="flex-wrap: wrap;" class="start_layout padding-tb-sm">
				<view v-for="(item1,index1) in item.typeName" :key="index1" class="item-tag">{{item1}}</view>
			</view>
			<view class="between_layout solid-top padding-top-sm">
				<view v-if="item.appraiseSatisfaction">
					<u-rate readonly v-model="item.appraiseSatisfaction"></u-rate>
				</view>
				<view class="end-time end_layout"><u-icon name="clock" style="margin-right: 10rpx;" color="#999999"
						size="14"></u-icon>{{item.createTime}}</view>
				<view v-if="item.processState=='COMPLETED'&&item.hasAppraise==1">
					<u-button :customStyle="{height: '50rpx',borderRadius: '10rpx'}"
						@click.native.stop="toAppraise(item.baseId)" text="评价" type="primary" size="small"></u-button>
				</view>
			</view>
		</view>
		<u-popup :customStyle="{width: '80%'}" :show="show" round='10' @close="show=false" closeable mode="center"
			:safeAreaInsetBottom='false'>
			<view class="popup_area">
				<view class="pop-title">评价</view>
				<u--form labelPosition="top" labelWidth="200" :model="ruleForm" :rules="rules" ref="uForm">
					<u-form-item required label="评价分值:" prop="appraiseSatisfaction">
						<u-rate v-model="ruleForm.appraiseSatisfaction"></u-rate>
					</u-form-item>
					<u-form-item required label="评价内容:" prop="appraiseContent">
						<u--textarea :height="100" v-model="ruleForm.appraiseContent" maxlength="100" count
							placeholder="请输入评价内容"></u--textarea>
					</u-form-item>
				</u--form>
				<view style="margin-top: 40rpx;" class="around_layout">
					<u-button shape='circle' class="sub-btn" type="error" @click="show=false">取消</u-button>
					<view style="width: 50rpx;"></view>
					<u-button shape='circle' class="sub-btn" type="primary" @click="submit">提交</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getDicts,
		evaluate
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				typeArr: [],
				show: false,
				ruleForm: {
					baseId: undefined,
					appraiseContent: undefined,
					appraiseSatisfaction: 0
				},
				rules: {
					appraiseContent: [{
						required: true,
						message: '请输入评价内容',
						trigger: 'blur',
					}, ]
				}
			}
		},
		props: {
			listData: {
				type: Array,
				default: () => []
			}
		},
		mounted() {
			getDicts('lczt').then(res => {
				this.typeArr = res.data
			})
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages_two/problem/company/problemInfo?id=' + id
				})
			},
			toAppraise(id) {
				this.ruleForm = {
					baseId: id,
					appraiseContent: undefined,
					appraiseSatisfaction: 0
				}
				this.show = true
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (this.ruleForm.appraiseSatisfaction==0) {
						uni.$u.toast('请完善必填项！')
					} else {
						evaluate(this.ruleForm).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '提交成功！',
									icon: 'success',
									duration: 2000
								})
								this.show = false
								this.$emit("popAppraise")
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					}
				}).catch(errors => {
					uni.$u.toast('请完善必填项！')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.p-area {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		position: relative;

		.entryStatus-area {
			position: absolute;
			right: 0;
			top: 0;
			background: linear-gradient(156deg, #FFB56D 0%, #FF6F0E 100%);
			padding: 6rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			border-radius: 0 10rpx 0 20rpx;
		}

		.p-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
		}

		.item-tag {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #3389FF;
			padding: 8rpx 12rpx;
			background: rgba(51, 137, 255, 0.1);
			border-radius: 6rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}

		.end-time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.demo-box {
		width: 35px;
		height: 20px;
		position: relative;
		border-radius: 5rpx;
		flex-shrink: 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #FFFFFF;
		margin-right: 20rpx;
	}

	#demo1 {
		background-color: #08B966;
	}

	#demo1:before {
		border: solid transparent;
		content: ' ';
		height: 0;
		left: 100%;
		position: absolute;
		width: 0;
		border-width: 6px;
		border-left-color: #08B966;
		top: 3px;
	}

	#demo3 {
		background-color: #F2270C;
	}

	#demo3:before {
		border: solid transparent;
		content: ' ';
		height: 0;
		left: 100%;
		position: absolute;
		width: 0;
		border-width: 6px;
		border-left-color: #F2270C;
		top: 3px;
	}

	#demo2 {
		background-color: #FD8A19;
	}

	#demo2:before {
		border: solid transparent;
		content: ' ';
		height: 0;
		left: 100%;
		position: absolute;
		width: 0;
		border-width: 6px;
		border-left-color: #FD8A19;
		top: 3px;
	}

	.popup_area {
		padding: 30rpx;

		.pop-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #303946;
			text-align: center;
		}
	}
</style>